<template>
  <view class="settlement-main">
    <view class="settlement-top-info">
      <view class="settlement-head">
        <text class="settlement-id">单号：{{data.orderNo}}</text>
        <text class="settlement-station">站点：{{data.siteName}}</text>
      </view>
      <view style="height: 515rpx;">
        <view style="margin: 32rpx 24rpx;font-weight: 400;font-size: 24rpx;">
          <view>
            <image 
              class="truck-info-item"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo9.png"></image>
            <text class="truck-info-item-1">{{data.plateNo}}</text>
            <text style="float: right;margin-right: 24rpx;">{{data.createTime}}</text>
          </view>
          <view style="margin-top: 16rpx;">
            <image 
              class="truck-info-item"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo10.png"></image>
            <text class="truck-info-item-1">{{data.outgoingNo}}</text>
          </view>
          <view style="margin-top: 16rpx;">
            <image 
              class="truck-info-item"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo11.png"></image>
            <text class="truck-info-item-1">{{data.carInfo.actualUser}}</text>
          </view>
          <view style="margin-top: 16rpx;">
            <image 
              class="truck-info-item"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo15.png"></image>
            <text class="truck-info-item-1">{{data.carInfo.carType}}</text>
          </view>
          <view style="margin-top: 16rpx;">
            <image 
              class="truck-info-item"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo13.png"></image>
            <text class="truck-info-item-1">{{data.phone}}</text>
          </view>
          <view style="margin-top: 16rpx;">
            <image 
              class="truck-info-item"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo8.png"></image>
            <text class="truck-info-item-1">{{data.mileage}}KM</text>
          </view>
          
        </view>
        <view style="padding: 10rpx 24rpx;">
          <image 
            mode="aspectFill"
            class="basic-img" 
            @click="previewOpen([data.plateNoPic])"
            :src="data.plateNoPic"></image>
          <image 
            mode="aspectFill"
            style="margin-left: 16rpx;"
            class="basic-img" 
            @click="previewOpen([data.mileagePic])"
            :src="data.mileagePic"></image>
          <text 
            @click="pickTruck"
            style="color: rgba(250, 140, 22, 1);font-size: 24rpx;margin-left: 30rpx;position: relative;top: -5rpx;">接车信息 >></text>
          <image style="width: 60rpx;height: 100rpx;margin-left: 85rpx;" :src="status[data.orderStatus]"></image>
        </view>
      </view>
    </view>
    
    <view style="margin: 16rpx;">
      
      <view v-for="(item,index) in data.parts" class="repair-part" :key="index">
        <view class="repair-part-head">
          <text>维修部位{{index + 1}}</text>
          <image 
            @click="addPeople(index,item.staff)"
            class="repair-people" 
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_23.png"></image>
          <image v-for="(im,k) in item.addUsers" class="repair-people" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_18.png" :key="k"></image>
        </view>
        <view style="padding: 8rpx 16rpx 0 20rpx;display: flex;justify-content: space-between;">
          <view>
            <textarea
              v-model="item.rawContent"
              style="width: 588rpx;height: 215rpx;border: 2rpx solid rgba(220, 220, 220, 1);border-radius: 8rpx;padding: 16rpx;font-size: 28rpx;"
              placeholder="请输入维修工时和维修内容（是否使用了配件）"
            ></textarea>
          </view>
          <view v-if="item.rawContent.length == 0" class="btn-bj">
            <view style="margin-top: 40rpx;">编</view>
            <view style="margin-top: 80rpx;">辑</view>
          </view>
          <view v-else class="btn-save" @click="update(index)">
            <view style="margin-top: 40rpx;">保</view>
            <view style="margin-top: 80rpx;">存</view>
          </view>
        </view>
        <view style="display: flex;justify-content: center;">
          <!-- <view class="test">
            
          </view> -->
          <view class="repair">
            
            <view class="repair-title">
              <text class="star">*</text>维修前：
            </view>
            <view v-if="item.beforeImg.length == 0" class="test" @click="chooseImg(index,1,-1)"></view>
            <view v-else class="show-imgs">
              <view @click="previewOpen(item.beforeImg)" style="overflow: hidden;height: 180rpx;width: 180rpx;">
                <image
                  v-for="(img,key) in item.beforeImg"
                  style="width: 70rpx;height: 70rpx;border-radius: 8rpx;margin: 15rpx 0 0 15rpx;float: left;"
                  mode="aspectFill"
                  :src="img"
                  :key="key"
                  ></image>
              </view>
              <view @click="chooseImg(index,1,-1)">
                <image style="width: 180rpx;height: 58rpx;position: relative;top: -58rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo16.png"></image>
              </view>
            </view>
            <!-- 维修前录音按钮 -->
            <view style="width: 180rpx;height: 70rpx;overflow: hidden;">
              <image @click="getVoice(index,3)" style="width: 180rpx;height: 70rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/recordbtnlogo.png"></image>
            </view>
          </view>
          <view style="width: 250rpx;padding-top: 135rpx;">
            <view>
              <image style="width: 250rpx;height: 95rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/repairpjlogo_2.png"></image>
            </view>
            <view style="margin-top: 45rpx;">
              <view 
                style="margin-left: 8rpx;float: left;" 
                v-if="item.beforeVoice.length > 0"
                @click="showVoice(item.beforeVoice)">
                <image style="width: 45rpx;height: 60rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/record_right.png"></image>
                <text style="float: right;font-size: 24rpx;color: rgba(250, 140, 22, 1);position: relative;top: -8rpx;left: 5rpx;">{{item.beforeVoice.length}}</text>
              </view>
              
              <view 
                style="margin-right: 8rpx;float: right;" 
                v-if="item.afterVoice.length > 0"
                @click="showVoice(item.afterVoice)">
                <text style="float: left;font-size: 24rpx;color: rgba(250, 140, 22, 1);position: relative;top: -8rpx;right: 5rpx;">{{item.afterVoice.length}}</text>
                <image style="width: 45rpx;height: 60rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/record_left.png"></image>
              </view>
            </view>
          </view>
          <view class="repair">
            
            <view class="repair-title">
              <text class="star">*</text>维修后：
            </view>
            <view v-if="item.afterImg.length == 0" class="test" @click="chooseImg(index,2,-1)"></view>
            <view v-else class="show-imgs">
              <view @click="previewOpen(item.afterImg)" style="overflow: hidden;height: 180rpx;width: 180rpx;">
                <image
                  v-for="(img,key) in item.afterImg"
                  style="margin: 15rpx 0 0 15rpx;float: left;width: 70rpx;height: 70rpx;border-radius: 8rpx;"
                  mode="aspectFill"
                  :src="img"
                  :key="key"
                  ></image>
              </view>
              <!-- 选择照片按钮 -->
              <view @click="chooseImg(index,2,-1)">
                <image style="width: 180rpx;height: 58rpx;position: relative;top: -58rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo16.png"></image>
              </view>
            </view>
            <!-- 维修后录制声音按钮 -->
            <view style="width: 180rpx;height: 70rpx;white-space: nowrap;">
              <image @click="getVoice(index,4)" style="width: 180rpx;height: 70rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/recordbtnlogo.png"></image>
            </view>
          </view>
        </view>
        <view style="margin: 24rpx 0 20rpx 0;">
          <view style="text-indent: 24rpx;color: rgba(170, 170, 170, 1);font-size: 24rpx;">更换配件</view>
          <view v-for="(ware,i) in item.warehouses" :key="i" style="margin-top: 16rpx;">
            <view class="warehouses" @click="test(index,i)">
              <text class="warehouses-title" v-if="ware.type == 1">急件</text>
              <text class="warehouses-title" v-else>配件</text>
              <text class="warehouses-title">{{i + 1}}:{{ware.name}}</text>
              <view v-if="!ware.isShow" style="float: right;">
                <text class="btn-show">
                  点击展开修改
                </text>
                <uni-icons
                  color="rgba(153, 153, 153, 1)"
                  style="position: relative;top: 4rpx;margin-left: 20rpx;" 
                  type="bottom" 
                  size="18"></uni-icons>
              </view>
              <view v-else style="float: right;">
                <text class="btn-show">
                  点击收起
                </text>
                <uni-icons
                  color="rgba(153, 153, 153, 1)"
                  style="position: relative;top: 4rpx;margin-left: 20rpx;" 
                  type="top" 
                  size="18"></uni-icons>
              </view>
            </view>
            <view v-if="ware.isShow">
              <view class="warehouses-main">
                <view v-if="ware.fakeStatus == 0 && ware.type == 1" class="pices">
                  <view class="key">
                    <text class="star">*</text>
                    <text style="color: rgba(250, 140, 22, 1);font-weight: 500;">供应商名称</text>
                  </view>
                  <view>
                    <input 
                      @input="updateInfo(index,i,1,$event.target.value)" 
                      placeholder="点击填写名称" 
                      class="value" 
                      v-model="ware.supplier"
                      :disabled="ware.edit != true"
                      confirm-type="next"/>
                  </view>
                </view>
                <view class="pices">
                  <view class="key">
                    <text class="star">*</text>
                    <text v-if="ware.type == 0">急件名称</text>
                    <text v-else>配件名称</text>
                  </view>
                  <view >
                    <input 
                      @input="updateInfo(index,i,2,$event.target.value)" 
                      placeholder="点击填写急件名" 
                      class="value" 
                      v-model="ware.name"
                      :disabled="ware.edit != true"
                      confirm-type="next" />
                  </view>
                </view>
                <view v-if="ware.fakeStatus == 0 && ware.type == 1" class="pices">
                  <view class="key">
                    <text class="star">*</text>
                    <text>采购单价（元）</text>
                  </view>
                  <view >
                    <input 
                      @input="updateInfo(index,i,3,$event.target.value)" 
                      placeholder="0.00" 
                      class="value" 
                      v-model="ware.inPrice"
                      :disabled="ware.edit != true"
                      confirm-type="next" />
                  </view>
                </view>
                <view class="pices">
                  <view class="key">
                    <text class="star">*</text>
                    <text>销售单价（元）</text>
                  </view>
                  <view >
                    <input 
                      @input="updateInfo(index,i,4,$event.target.value)" 
                      placeholder="0.00" 
                      class="value" 
                      v-model="ware.outPrice"
                      :disabled="ware.edit != true"
                      confirm-type="next" />
                  </view>
                </view>
                <view class="pices">
                  <view class="key">
                    <text class="star">*</text>
                    <text>数量</text>
                  </view>
                  <view >
                    <input 
                      @input="updateInfo(index,i,5,$event.target.value)" 
                      placeholder="点击填写数量" 
                      class="value" 
                      v-model="ware.count"
                      :disabled="ware.edit != true"
                       />
                  </view>
                </view>
                <view class="pices" v-if="ware.type == 1">
                  <view class="key">
                    <text class="star">*</text>
                    <text>是否空出</text>
                  </view>
                  <view>
                    <image 
                      v-if="ware.fakeStatus == 0" 
                      style="width: 120rpx;height: 98rpx;margin-top: 18rpx;" 
                      src="../../../static/images/off.png"
                      @click="isFake(index,i)"
                      ></image>
                    <image 
                      v-else 
                      style="width: 102rpx;height: 62rpx;margin-top: 20rpx;" 
                      src="../../../static/images/open.png"
                      @click="isFake(index,i)"></image>
                  </view>
                </view>
                <view style="margin-top: 20rpx;display: flex;">
                  <view>
                    <view class="img-title">
                      <text style="color: rgba(250, 140, 22, 1);margin-right: 10rpx;">*</text>旧件照片：
                    </view>
                    <view v-if="ware.oldImg.length == 0" class="test" @click="chooseImg(index,11,i)"></view>
                    <view v-else class="show-imgs">
                      <view @click="previewOpen(ware.oldImg)" style="overflow: hidden;height: 180rpx;width: 180rpx;">
                        <image
                          v-for="(img,key) in ware.oldImg"
                          style="width: 70rpx;height: 70rpx;border-radius: 8rpx;margin: 15rpx 0 0 15rpx;float: left;"
                          mode="aspectFill"
                          :src="img"
                          :key="key"
                          ></image>
                      </view>
                      <view @click="chooseImg(index,11,i)">
                        <image style="width: 180rpx;height: 58rpx;position: relative;top: -58rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo16.png"></image>
                      </view>
                    </view>
                  </view>
                  <!-- oldImg -->
                  <view style="margin-left: 45rpx;">
                    <view class="img-title">
                      <text style="color: rgba(250, 140, 22, 1);margin-right: 10rpx;">*</text>新件照片：
                    </view>
                    <view v-if="ware.newImg.length == 0" class="test" @click="chooseImg(index,13,i)"></view>
                    <view v-else class="show-imgs">
                      <view @click="previewOpen(ware.newImg)" style="overflow: hidden;height: 180rpx;width: 180rpx;">
                        <image
                          v-for="(img,key) in ware.newImg"
                          style="width: 70rpx;height: 70rpx;border-radius: 8rpx;margin: 15rpx 0 0 15rpx;float: left;"
                          mode="aspectFill"
                          :src="img"
                          :key="key"
                          ></image>
                      </view>
                      <view @click="chooseImg(index,13,i)">
                        <image style="width: 180rpx;height: 58rpx;position: relative;top: -58rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo16.png"></image>
                      </view>
                    </view>
                  </view>
                  <!-- newImg -->
                  <view style="margin-left: 45rpx;" v-if="ware.type == 1">
                    <view class="img-title">
                      <text style="color: rgba(250, 140, 22, 1);margin-right: 10rpx;">*</text>单据照片：
                    </view>
                    <view v-if="ware.orderImg.length == 0" class="test" @click="chooseImg(index,14,i)"></view>
                    <view v-else class="show-imgs">
                      <view @click="previewOpen(ware.orderImg)" style="overflow: hidden;height: 180rpx;width: 180rpx;">
                        <image
                          v-for="(img,key) in ware.orderImg"
                          style="width: 70rpx;height: 70rpx;border-radius: 8rpx;margin: 15rpx 0 0 15rpx;float: left;"
                          mode="aspectFill"
                          :src="img"
                          :key="key"
                          ></image>
                      </view>
                      <view @click="chooseImg(index,14,i)">
                        <image style="width: 180rpx;height: 58rpx;position: relative;top: -58rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo16.png"></image>
                      </view>
                    </view>
                  </view>
                  <!-- orderImg -->
                </view>
                <view style="margin-top: 10rpx;">
                  <!-- 保存急件按钮 -->
                  <image
                    v-if="ware.edit"
                    @click="save(index,i)"
                    style="width: 550rpx;height: 90rpx;"
                    src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/aclogo_3.png"></image>
                  <image
                    v-else
                    style="width: 550rpx;height: 90rpx;"
                    src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/aclogo_4.png"
                    ></image>
                  <!-- 删除按钮 -->
                  <image
                    @click="deleteWare(index,i)"
                    style="width: 100rpx;height: 90rpx;margin-left: 20rpx;" 
                    src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo12.png"></image>
                </view>
              </view>
            </view>
          </view>
          <view style="margin-top: 30rpx;height: 120rpx;">
            <!-- 添加配件按钮 -->
            <image
              style="width: 325rpx;height: 90rpx;margin-left: 24rpx;"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/addaclogo_1.png"></image>
              
            <!-- 添加急件按钮 -->
            <image
              @click="addWarehouses(index,0)"
              style="width: 325rpx;height: 90rpx;margin-left: 18rpx;"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/addaclogo_2.png"></image>
          </view>
        </view>
      </view>

    </view>
    
    <!-- 添加维修部位按钮 -->
    <view @click="addParts" style="padding: 0 10rpx 15rpx 10rpx;">
      <image style="width: 730rpx;height: 115rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/addrepairproject.png">
      </image>
    </view>
    
    <!-- 完工按钮 -->
    <view style="padding-bottom: 60rpx;">
      <button 
        @click="submitSettlement"
        style="width: 720rpx;height: 95rpx;background-color: rgba(250, 140, 22, 1);color: white;line-height: 95rpx;font-size: 36rpx;">完工</button>
    </view>
    <!-- 语音弹出层 -->
    <uni-popup ref="popup" type="center">
      <view style="width: 685rpx;background-color: white;border-radius: 16rpx;padding: 50rpx 0 34rpx 0;height: 505rpx;overflow: auto;">
        <view v-for="(voice,j) in voices" style="padding: 0 0 16rpx 48rpx;" :key="j">
          <view style="display: flex;">
            <view style="line-height: 70rpx;white-space: nowrap;overflow: hidden;width: 150rpx;">{{voice.name}}</view>
            <view 
              :style="{'width':voice.time / 20 * 470 + 'rpx'}"
              @click="playVoice(voice.url)" 
              class="voice-box">
              <image style="width: 470rpx;height: 70rpx;" src="../../../static/images/voice.png"></image>
              <view class="voice-logo">
                <image style="width: 38rpx;height: 50rpx;" src="../../../static/images/voice_logo.png"></image>
                <text style="font-size: 32rpx;font-weight: 500;color: white;position: relative;top: -15rpx;left: 10rpx;">{{voice.time}}<text>"</text></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 录制语音 -->
    <uni-popup ref="getVoice" type="bottom" background-color="#fff">
      <view style="height: 500rpx;text-align: center;padding: 10rpx;">
        <view style="height: 60rpx;width: 100%;text-align: right;">
          <uni-icons @click="closePopup" color="#000000" type="closeempty" size="30"></uni-icons>
        </view>
        <view class="recorder-head">
          <text v-if="recorder.size == 1">按住说话</text>
          <text v-else>{{recorder.recorderTime}}</text>
        </view>
        <view style="margin-top: 100rpx;">
          <image 
             @touchstart="startRecorder" 
             @touchend="endRecorder" 
             @touchcancel="cancelRecorder"
            :style="{'transform': 'scale(' + recorder.size + ',' + recorder.size + ')'}" 
            class="recorder"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/record.png"></image>
        </view>
      </view>
    </uni-popup>
    
    <!-- 添加维修人员 -->
    <uni-popup ref="addRepairPeople" type="center">
      <view class="add-repair-people">
        <view v-for="(item,index) in allUsers" class="people" :key="index">
          <text 
            v-if="item.isPick" 
            style="color: rgba(250, 140, 22, 1);"
            @click="peoplePick(item)">{{item.name}}</text>
          <text v-else @click="peoplePick(item)">{{item.name}}</text>
        </view>
        <view @click="addRepairp" class="add-people-btn">
          添加维修人员
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
    getSettlement,
    addParts,
    saveWarehouse,
    deleteWarehouse,
    getUsers,
    addRepairPeople,
    updateRowContent,
    uploadImgOrVoice,
    updateOrder
    } from '@/api/settlement/settlement'
  import {uploadFile} from '@/api/uploadFile'
  //播放声音
  const audioPlay = uni.createInnerAudioContext();
  audioPlay.obeyMuteSwitch = false;
  
  //录制声音
  const recorderManager = uni.getRecorderManager();
  export default {
    data(){
      return {
        data:{},
        imgs:[
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/repairpjlogo_2.png'
        ],
        status:[
          '',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_jieche2.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_zaixiu.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_wangong2.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_shenhe2.png',
          'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/ordertype_jiesuan.png',
        ],
        requestHead:'http://192.168.110.120:8089',
        voices:[],
        recorder:{
          size:1,
          type:0,
          time:0,
          recorderTime:"00'00\"",
          count:null,
          path:"",
          index:-1,
        },
        addUsers:[],
        allUsers:[],
        isAdd:false,
        addId:-1
      }
    },
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        this.load(option.id);
        this.uploadVoiceListen();
        
    },
    components:{
    },
    methods:{
      load:function(id) {
        var that = this;
        getSettlement({sId:id}).then(response => {
          var _data = response[1].data;
          console.log(_data)
          if(_data.status == 200) {
            
            that.data = _data.data;
            var parts = _data.data.parts;
            for(let item of parts) {
              //用于展示
              var beforeImg = [];
              var afterImg = [];
              var beforeVoice = [];
              var afterVoice = [];
              var user = item.staff.split(',');
              item.addUsers = [];
              for(let ii of user) {
                if(ii != '') {
                  item.addUsers.push(ii);
                }
              }
              console.log(item.addUsers);
              for(let attach of item.attaches) {
                
                if(attach.type == 1) {
                  beforeImg.push(attach.url);
                }else if(attach.type == 2) {
                  afterImg.push(attach.url);
                }else if(attach.type == 3) {
                  beforeVoice.push({url:attach.url,name:attach.name,time:attach.time});
                }else if(attach.type == 4) {
                  afterVoice.push({url:attach.url,name:attach.name,time:attach.time});
                }
              }
              for(let ware of item.warehouses) {
                ware.isShow = false;
                var oldImg = [];
                var newImg = [];
                var orderImg = [];
                for(let att of ware.attaches) {
                  if(att.type == 11) {
                    oldImg.push(att.url);
                  }else if(att.type == 13) {
                    newImg.push(att.url);
                  }else if(att.type == 14) {
                    orderImg.push(att.url);
                  }
                }
                ware.oldImg = oldImg;
                ware.newImg = newImg;
                ware.orderImg = orderImg;
              }
              item.beforeImg = beforeImg;
              item.afterImg = afterImg;
              item.beforeVoice = beforeVoice;
              item.afterVoice = afterVoice;
            }
            console.log(_data.data)
          }
        })
      },
      pickTruck:function() {
        var that = this;
        uni.navigateTo({
          url: '/pages/repair/settlement/pick_truck?id=' + that.data.id
        })
      },
      previewOpen:function(e) { //展示照片
        uni.previewImage({
          current: '',
          urls: e
        });
      },
      chooseImg:function(index,key,wareId) { // 先择照片
        var that = this;
        uni.chooseImage({
          count:1,
          sourceType:['camera'],
          success:function(res){
            console.log(res);
            var part = that.data.parts[index];
            if(key == 1) {
              var id = part.id;
              that.updateImg(id,part.beforeImg,res.tempFilePaths[0],key);
            }else if(key == 2) {
              var id = part.id;
              that.updateImg(id,part.afterImg,res.tempFilePaths[0],key);
            }else if(key == 11 && wareId != -1) {
              var id = part.warehouses[wareId].id;
              that.updateImg(id,part.warehouses[wareId].oldImg,res.tempFilePaths[0],key)
            }else if(key == 13 && wareId != -1) {
              var id = part.warehouses[wareId].id;
              that.updateImg(id,part.warehouses[wareId].newImg,res.tempFilePaths[0],key)
            }else if(key == 14 && wareId != -1) {
              var id = part.warehouses[wareId].id;
              that.updateImg(id,part.warehouses[wareId].orderImg,res.tempFilePaths[0],key)
            }
          }
        })
      },
      upload:function(index,files,addFile,type,_data,data,time) {
        console.log(time)
        uploadImgOrVoice({id:0,refId:index,type:type,url:_data.data.model,time:time})
        .then(response => {
          console.log(response)
          var info = response[1].data;
          if(info.status == 200) {
            files.push(addFile);
            //强制数据跟新，否则跟新数据，视图不更新
            data.parts.push({});
            data.parts.pop();
            uni.showToast({
              title:'上传成功',
              duration:1500
            })
          }else {
            uni.showToast({
              title:'上传失败',
              icon:'error',
              duration:1500
            })
          }
        })
      },
      updateImg:function(index,imgs,addImg,type) { //上传照片
        var that = this;
        uploadFile(addImg,{type:3,duraction:''}).then(response => {
          var _data = JSON.parse(response[1].data);
          console.log(_data)
          if(_data.status == 200) {
            that.upload(index,imgs,addImg,type,_data,that.data,'');
          }else {
            uni.showToast({
              title:'上传失败',
              icon:'error',
              duration:1500
            })
          }
        })
      },
      test:function(index,key) {
        var info = this.data.parts[index].warehouses[key];
        // console.log(info)
        info.isShow = !info.isShow;
        
        this.data.parts.push({});
        this.data.parts.pop();
      },
      showVoice:function(data) { //打开声音播放窗口
        this.voices = data;
        this.$refs.popup.open('center');
      },
      playVoice:function(url) { //播放声音
      
        // console.log(url);
        //audioPlay在最上面创建的
        if(audioPlay.src != url) {
          audioPlay.src = url;
          audioPlay.play();
        }else {
          audioPlay.pause();
          audioPlay.src = '123';
        }
      },
      addWarehouses:function (index,type) {
        var that = this;
        var part = this.data.parts[index];
        var ware = {
          attaches:[],
          count: 1,
          fakeStatus: 0,
          inPrice: "",
          name: "",
          outPrice: "",
          partId: part.id,
          settlementId: that.data.id,
          supplier: "",
          isShow:true,
          newImg:[],
          oldImg:[],
          orderImg:[],
          type:1,
          edit:true,
        }
        part.warehouses.push(ware);
      },
      updateInfo:function(i,j,key,value) {
        var ware = this.data.parts[i].warehouses[j];
        if(key == 1) {
          ware.supplier = value;
        }else if(key == 2) {
          ware.name = value;
        }else if(key == 3) {
          ware.inPrice = value;
        }else if(key == 4) {
          ware.outPrice = value;
        }else if(key == 5) {
          ware.count = value;
        }
      },
      save:function(index,key) {
        var that = this;
        var part = that.data.parts[index];
        var ware = part.warehouses[key];
        // console.log(ware)
        var data = {
          count:ware.count,
          fakeStatus:ware.fakeStatus,
          money:ware.inPrice,
          name:ware.name,
          outPrice:ware.outPrice,
          partId:part.id,
          settlementId:that.data.id,
          supplier:ware.supplier
        }
        saveWarehouse(data)
          .then(response => {
            var _data = response[1].data;
            if(_data.status == 200) {
              ware.edit = false;
              uni.showToast({
                title:'保存成功'
              })
              setTimeout(function() {
                ware.isShow = false;
              },1000);
            }else {
              console.log(_data)
              uni.showToast({
                icon:'error',
                title:'保存失败'
              })
            }
          }).catch(error => {
            uni.showToast({
              icon:'error',
              title:''
            })
          })
      },
      deleteWare:function(index,key) {
        var that = this;
        uni.showModal({
          title:'提示',
          content:'您确定要删除吗？',
          success:function(res) {
            if(res.confirm) {
              var ware = that.data.parts[index].warehouses;
              console.log(ware[key].id);
              deleteWarehouse({id:ware[key].id,type:4}).then(response => {
                var _data = response[1].data;
                console.log(_data)
                if(_data.status == 200) {
                  ware.splice(key,1);
                  uni.showToast({
                    title:'删除成功'
                  })
                }else {
                  uni.showToast({
                    icon:'error',
                    title:'删除失败'
                  })
                }
              }).catch(error => {
                uni.showToast({
                  icon:'error',
                  title:'发生错误'
                })
              })
            }
          }
        })
        
      },
      getVoice:function(index,type) {
        var that = this;
        uni.authorize({
            scope: 'scope.record',
            success() {
              that.$refs.getVoice.open('bottom');
              that.recorder.type = type;
              that.recorder.index = index;
            }
        })
      },
      startRecorder:function() {
        // recorderManager
        var that = this;
        this.recorder.size = 1.2;
        recorderManager.start();
        that.recorder.count = setInterval(function() {
          that.recorder.time ++;
          var mm = parseInt(that.recorder.time / 60);
          var ss = that.recorder.time % 60;
          if(mm < 10) {
            mm = '0' + mm;
          }
          if(ss < 10) {
            ss = '0' + ss;
          }
          that.recorder.recorderTime = mm + "'" + ss + "\"";
        },1000);
      },
      endRecorder:function() {
        this.recorder.size = 1;
        clearInterval(this.recorder.count);
        recorderManager.stop();
      },
      uploadVoiceListen:function() {
        var that = this;
        recorderManager.onStop(function (res) {
            // console.log('recorder stop' + JSON.stringify(res));
          var time = that.recorder.time;
          if(time < 1) {
            uni.showToast({
              title:'录制时间过短',
              icon:'error'
            })
          }else {
            that.recorder.path = res.tempFilePath;
            var info = {
                url:res.tempFilePath,
                time:time,
                name:uni.getStorageSync('user').name
              };
            var part = that.data.parts[that.recorder.index];
            if(that.recorder.type == 3) {
              that.uploadVoice(part.id,part.beforeVoice,info,3,that.data,{type:1,duration:'' + time});
            }else {
              that.uploadVoice(part.id,part.afterVoice,info,4,that.data,{type:1,duration:'' + time});
            }
            audioPlay.src = res.tempFilePath;
          }
          that.recorder.recorderTime = "00'00\"";
          that.recorder.time = 0;
        });
        recorderManager.onError(function(err) {
          uni.showToast({
            icon:'error',
            title:'无权限，录音失败'
          })
        })
      },
      uploadVoice:function(index,voices,addVoice,type,data,fileInfo) {
        var that = this;
        uploadFile(addVoice,fileInfo).then(response => {
          var _data = JSON.parse(response[1].data);
          if(_data.status == 200) {
            that.upload(index,voices,addVoice,type,_data,data,fileInfo.duration);
          }else {
            uni.showToast({
              icon:'error',
              title:'发生错误'
            })
          }
        })
      },
      closePopup:function() {
        this.$refs.getVoice.close();
      },
      isFake:function(index,key) {
        var ware = this.data.parts[index].warehouses[key];
        var fake = ware.fakeStatus
        if(typeof ware.edit != 'undefined' && ware.edit) {
          ware.fakeStatus = Math.abs(fake - 1);
        }
        
      },
      addPeople:function(index,addUsers) {
        var that = this;
        that.isAdd = true;
        var id = that.data.parts[index].id;
        that.addId = index;
        getUsers({repairProjectId:id}).then(response => {
          var _info = response[1].data;
          if(_info.status == 200) {
            var allUsers =_info.data;
            var add = []
            for(let item of allUsers) {
              if(addUsers.indexOf(item.id) >= 0) {
                item.isPick = true;
              }else {
                item.isPick = false;
              }
              add.push(item)
            }
            that.allUsers = allUsers;
            this.$refs.addRepairPeople.open('center');
          }
          
          
        
        })
        
      },
      peoplePick:function(obj) {
        obj.isPick = !obj.isPick;
      },
      addRepairp:function() {
        var all = this.allUsers;
        var add = all.length > 0 ? '' + all[0].id : '';
        for(let i = 1;i < all.length;i ++) {
          if(all[i].isPick) {
            add += ',' + all[i].id;
          }
        }
        var data = this.data.parts;
        var index = this.addId;
        var id = data[index].id;
        // console.log(typeof id);
        addRepairPeople({repairProjectId:id,userIds:add}).then(response => {
          var _data = response[1].data;
          if(_data.status == 200) {
            data[index].addUsers = add.split(',');
            data[index].staff = add;
            uni.showToast({
              title:'添加成功'
            })
          }
        })
      },
      update:function(index) {
        var data = this.data.parts[index];
        // console.log(typeof data.id)
        
        updateRowContent({repairProjectId:data.id,rawContent:data.rawContent}).then(response => {
          var _data = response[1].data;
          if(_data.status == 200) {
            uni.showToast({
              title:'修改成功'
            })
          }else {
            uni.showToast({
              icon:'error',
              title:'修改失败'
            })
          }
        })
      },
      addParts:function() {
        var that = this;
        var id = this.data.id;
        addParts({settlmentId:id}).then(response => {
          var _data = response[1].data;
          if(_data.status == 200) {
            uni.showToast({
              title:'添加成功'
            });
            that.load(id);
          }else {
            uni.showToast({
              icon:'error',
              title:'发生错误'
            })
          }
        })
      },
      submitSettlement:function() {
        updateOrder({id:this.data.id,orderStatus:this.data.orderStatus + 1}).then(response => {
          var _data = response[1].data;
          if(_data.status == 200) {
            
            uni.reLaunch({
              url:'/pages/index/index?page=0',
              success() {
                uni.showToast({
                  title:'操作成功'
                })
              }
            })
          }else {
            uni.showToast({
              icon:'error',
              title:'发生错误'
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .settlemen-main {
    font-family: PingFangSC-Medium, PingFang SC;
    color: rgba(51, 51, 51, 1);
  }
  .settlement-top-info {
    margin: 16rpx;
    box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.2);
    border-radius: 16rpx;
  }
  .settlement-head {
    height: 110rpx;
    border-radius: 20rpx 20rpx 0 0;
    background-color: rgba(246, 247, 248, 1);
    line-height: 110rpx;
    padding: 0 24rpx;
  }
  .settlement-id {
    font-weight: 500;
    font-size: 32rpx;
  }
  .settlement-station {
    font-size: 28rpx;
    font-weight: 500;
    float: right;
  }
  
  .truck-info-item {
    width: 30rpx;
    height: 30rpx;
    position: relative;
    top: 8rpx;
  }
  .truck-info-item-1 {
    margin-left: 22rpx;
    line-height: 34rpx;
  }
  .basic-img {
    width: 150rpx;
    height: 150rpx;
    border-radius: 12rpx;
  }
  
  .repair-part {
    border-radius: 16rpx;
    box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 16rpx;
    
    .repair-part-head {
      background-color: rgba(246, 247, 248, 1);
      border-radius: 16rpx 16rpx 0 0;
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 24rpx;
      font-size: 32rpx;
      .repair-people {
        width: 32rpx;
        height: 32rpx;
        float: right;
        position: relative;
        top: 38rpx;
      }
    }
    
    .test {
      width: 180rpx;
      height: 180rpx;
      background-image: url('https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/photoorvideologo.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-top: 32rpx;
      margin-bottom: 20rpx;
    }
    .show-imgs {
      width: 180rpx;
      height: 180rpx;
      border-radius: 12rpx;
      background-color: rgba(0, 0, 0, 0.2);
      margin-bottom: 16rpx;
      margin-top: 32rpx;
      overflow: hidden;
    }
    .repair {
      width: 180rpx;
      padding-top: 20rpx;
      text-align: center;
      .repair-title {
        font-weight: 400;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
  .star {
    color: rgba(250, 140, 22, 1);
    margin-right: 10rpx;
  }
  .btn-bj {
    width: 55rpx;
    height: 245rpx;
    background-color: rgba(220, 220, 220, 1);
    border-radius: 8rpx;
    color: white;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
  }
  .btn-save {
    width: 55rpx;
    height: 245rpx;
    background-color: rgba(250, 140, 22, 1);
    border-radius: 8rpx;
    color: white;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
  }
  .warehouses {
    height: 92rpx;
    background-color: rgba(246, 247, 248, 1);
    line-height: 92rpx;
    padding:0 24rpx 0 24rpx;
    overflow: hidden;
    white-space: nowrap;
    .warehouses-title {
      font-size: 28rpx;
      color: rgba(51, 51, 51, 1);
    }
    .btn-show {
      // float: right;
      color: rgba(170, 170, 170, 1);
      font-size: 24rpx;
    }
  }
  .warehouses-main {
    margin: 0 auto;
    width: 670rpx;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    .pices {
      height: 110rpx;
      line-height: 110rpx;
      border-bottom: 2rpx solid rgba(220, 220, 220, 1);
      display: flex;
      justify-content: space-between;
      .key {
        // float: left;
      }
      .value {
        width: 300rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin-top: 38rpx;
        font-size: 28rpx;
        text-align: right;
      }
    }
  }
  .img-title {
    font-size: 28rpx;
  }
  .voice-box{
    height:70rpx;
    // white-space: nowrap;
    overflow: hidden;
    border-radius: 10rpx;
    max-width: 470rpx;
    min-width: 200rpx;
    .voice-logo {
      line-height: 70rpx;
      position: relative;
      left: 30rpx;
      top: -68rpx;
    }
  }
  .recorder-head {
    font-size: 52rpx;
    display: block;
  }
  .recorder {
    width: 210rpx;
    height: 210rpx;
    transition: all 0.5s linear;
  }
  .add-repair-people {
    width: 588rpx;
    border-radius: 16rpx;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.5), 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.5);
    background-color: white;
    padding: 0 36rpx 26rpx 36rpx;
    .people {
      width: 96rpx;
      height: 44rpx;
      line-height: 44rpx;
      font-size: 32rpx;
      text-align: center;
      font-weight: 500;
      color: rgba(170, 170, 170, 1);
      margin: 40rpx 50rpx 0 50rpx;
      display: inline-block;
    }
    .add-people-btn {
      width: 580rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: rgba(250, 140, 22, 1);
      text-align: center;
      font-size: 36rpx;
      color: white;
      border-radius: 16rpx;
      margin-left: 4rpx;
      margin-top: 50rpx;
    }
  }
</style>
